<template>
  <div class="app-container animated fadeIn">
    <Modal v-model="in_storage" fullscreen :closable="false" :mask-closable="false" footer-hide>
      <div style="text-align: center">
        <h1 style="color: crimson; font-weight: bold; font-size: 32px">入库操作台</h1>
      </div>
      <div style="float: right; font-size: 18px; font-weight: bold; position: absolute; right: 20px">
        <span>时间:</span>
        <span>{{ date }}</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <Tabs type="card">
        <TabPane label="入库操作台">
          <Row>
            <Col span="24">
              <div style="text-align: center; box-shadow: 2px 4px 6px gray; border-radius: 10px; border: 1px solid gray; height: 750px">
                <div class="rightK" style="text-align: center; width: 48%; margin-right: 10px; float: left">
                  <span style="font-size: 28px; font-weight: bold">物料信息面板</span>
                  <div style="margin: 10px">
                    <Form align="left">
                      <FormItem style="width: 95%; margin: 5px; text-align: left">
                        <span
                          style="
                            display: block;
                            font-size: 22px;
                            background-color: #f8f8f9;
                            border: 1px solid #dcdee2;
                            color: blue;
                            float: left;
                            width: 110px;
                            height: 40px;
                            text-align: center;
                            font-weight: bold;
                          ">
                          班次代码:
                        </span>
                        <RadioGroup v-model="BcDm" size="large" style="padding-left: 15px" @on-change="changeBcdm">
                          <Radio label="白班" />
                          <Radio label="夜班" />
                          <Radio label="部装" />
                          <Radio label="返工入库" />
                          <!-- <Radio label="白班-A" />
                          <Radio label="白班-B" />
                          <Radio label="夜班-A" />
                          <Radio label="夜班-B" /> -->
                        </RadioGroup>
                      </FormItem>
                      <FormItem style="width: 70%; margin: 5px; text-align: left">
                        <span
                          style="
                            display: block;
                            font-size: 22px;
                            background-color: #f8f8f9;
                            border: 1px solid #dcdee2;
                            color: blue;
                            float: left;
                            width: 110px;
                            height: 36px;
                            text-align: center;
                            font-weight: bold;
                          ">
                          客户代码:
                        </span>
                        <input
                          type="text"
                          list="child_datalist"
                          @input="getAllCustomer"
                          @focusout="FillAttribute"
                          id="child"
                          style="width: 48%"
                          class="ivu-input ivu-input-large"
                          v-model="customerCode" />
                        <datalist id="child_datalist" style="height: 100px">
                          <option v-for="item in provider_list" v-bind:key="item.itmWldm">{{ item.itmCustwldm }}</option>
                        </datalist>
                      </FormItem>
                      <FormItem style="width: 65%; margin: 5px">
                        <Input size="large" disabled readonly v-model="pmgg">
                          <span style="font-size: 22px; color: blue; font-weight: bold" slot="prepend">品名规格:</span>
                        </Input>
                      </FormItem>
                      <FormItem style="width: 45%; margin: 5px; text-align: left">
                        <Input size="large" disabled v-model="wldm">
                          <span style="font-size: 22px; color: blue; font-weight: bold" slot="prepend">物料代码:</span>
                        </Input>
                      </FormItem>
                      <FormItem style="width: 45%; margin: 5px">
                        <Input size="large" disabled readonly v-model="rkkh">
                          <span style="font-size: 22px; color: blue; font-weight: bold" slot="prepend">入库客户:</span>
                        </Input>
                      </FormItem>
                      <FormItem style="width: 70%; margin: 5px">
                        <span
                          style="
                            display: block;
                            font-size: 22px;
                            background-color: #f8f8f9;
                            border: 1px solid #dcdee2;
                            color: blue;
                            float: left;
                            width: 110px;
                            height: 36px;
                            text-align: center;
                            font-weight: bold;
                          ">
                          入库仓库:
                        </span>
                        <Select v-model="rkck" :disabled="true" class="inputName" style="width: 50%" filterable>
                          <Option v-for="item in warehouse_list" :value="item.itemCode" :key="item.itemCode">{{ item.itemView }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem style="width: 70%; margin: 5px">
                        <span
                          style="
                            display: block;
                            font-size: 22px;
                            background-color: #f8f8f9;
                            border: 1px solid #dcdee2;
                            color: blue;
                            float: left;
                            width: 110px;
                            height: 36px;
                            text-align: center;
                            font-weight: bold;
                          ">
                          入库类型:
                        </span>
                        <Select v-model="rklx" :disabled="true" class="inputName" style="width: 50%" filterable>
                          <Option v-for="item in rkOptions" :value="item.itemCode" :key="item.itemCode">{{ item.itemView }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem style="width: 65%; margin: 5px">
                        <span
                          style="
                            display: block;
                            font-size: 22px;
                            background-color: #f8f8f9;
                            border: 1px solid #dcdee2;
                            color: blue;
                            float: left;
                            width: 110px;
                            height: 36px;
                            text-align: center;
                            font-weight: bold;
                          ">
                          入库数量:
                        </span>
                        <InputNumber size="large" v-model="num" controls-position="right" :precision="0" style="width: 50%"></InputNumber>
                      </FormItem>
                    </Form>
                  </div>
                </div>
                <div style="text-align: center; width: 50%; float: left">
                  <span style="font-size: 28px; font-weight: bold">入库信息面板</span>
                  <div>
                    <Card style="margin: 10px; background-color: burlywood">
                      <div style="margin-top: 10px; text-align: left">
                        <span class="font_submit">物料代码:</span>
                        <span class="font_submit1">{{ add_data.wldm }}</span>
                      </div>
                      <div style="margin-top: 10px; text-align: left">
                        <span class="font_submit">品名规格:</span>
                        <span class="font_submit1">{{ add_data.pmgg }}</span>
                      </div>
                      <div style="margin-top: 10px; text-align: left">
                        <span class="font_submit">客户代码:</span>
                        <span class="font_submit1">{{ add_data.rkkh }}</span>
                      </div>
                      <div style="margin-top: 10px; text-align: left">
                        <span class="font_submit">入库仓库:</span>
                        <span class="font_submit1">{{ add_data.rkck }}</span>
                      </div>
                      <div style="margin-top: 10px; text-align: left">
                        <span class="font_submit">入库类型:</span>
                        <span class="font_submit1">{{ add_data.rklx }}</span>
                      </div>
                      <div style="margin-top: 10px; text-align: left">
                        <span class="font_submit">入库数量：</span>
                        <span class="font_submit2">{{ num }}</span>
                      </div>
                    </Card>
                  </div>
                  <div style="margin-top: 20px">
                    <div style="text-align: center">
                      <div style="margin-top: 20px; display: inline-block; margin-right: 20px">
                        <button
                          style="font-size: 30px; border-radius: 15px; background-color: #1e90ff; color: white; width: 200px"
                          @click="sumData()">
                          入库
                        </button>
                      </div>
                      <div style="margin-top: 20px; display: inline-block; margin-right: 20px">
                        <button
                          @click="backStorage"
                          style="font-size: 30px; border-radius: 15px; background-color: #1e90ff; color: white; width: 200px">
                          返回主页
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </TabPane>
        <TabPane label="入库记录表">
          <div class="rkpb">
            <table id="tabJy">
              <tr>
                <th style="width: 150px">客户编码</th>
                <th style="width: 120px">班次</th>
                <th :colspan="tabrkpb.cols">数量</th>
                <th style="width: 100px">合计</th>
              </tr>
              <tr v-for="row in tabrkpb.tab">
                <td>{{ row.rpdWldm }}</td>
                <td>{{ row.rpmBcdm }}</td>
                <td v-for="(n, i) in row.num" style="width: 80px" :key="i" :title="row.time[i]">
                  {{ n }}
                </td>
                <td v-for="n in tabrkpb.cols - row.num.length">&emsp;</td>
                <td>{{ row.sum }}</td>
              </tr>
            </table>
          </div>
        </TabPane>
      </Tabs>

      <divider style="color: red"></divider>
    </Modal>
  </div>
</template>

<script>
import { getAll } from '@/api/repertory/Storage'
import { automaticStorage, PDACusWldmList, getItmMstrByPDACustwldm, getStatisticsWarehousing } from '@/api/repertory/PDA'

export default {
  name: 'PDA',
  data() {
    return {
      in_storage: true,
      out_storage: false,
      date: '',
      BcDm: '白班',
      customerCode: '',
      wldm: '',
      pmgg: '',
      rkkh: '',
      rkck: '',
      rklx: '',
      num: null,
      //提供的所有客户代码
      provider_list_data: [],
      //符合条件的客户代码
      provider_list: [],
      //入库仓库
      warehouse_list: [],
      //入库类型
      type_list: [],
      //入库客户
      kh_list: [],
      add_data: {
        rklx: '计划性入库',
      },
      rkOptions: [
        {
          itemCode: 'A',
          itemView: '计划性入库',
        },
      ],
      add_data_null: {
        wldm: '',
        pmgg: '',
        rkkh: '',
        rkck: '',
        rklx: '计划性入库',
        num: null,
      },
      tabrkpb: { cols: 1, tab: [] },
    }
  },
  created() {
    //请求所有客户代码
    PDACusWldmList().then((response) => {
      this.provider_list_data = response.data
    })

    //所有仓库
    getAll().then((response) => {
      this.warehouse_list = response.data
      for (let item of this.warehouse_list) {
        item.itemView = '[' + item.storageCode + ']' + item.storageName
        item.listClass = 'default'
        item.itemCode = item.storageId + ''
      }
    })
    this.changeBcdm()
  },
  methods: {
    msg(msg, type) {
      this.$message({ showClose: true, message: msg, type: 'success' })
    },
    // getInfo(val) {
    //   if (val.length % 16 == 0) {
    //     this.$refs['input'].focus()
    //     if (val.length > 16) {
    //       this.wldm = val.substring(16, 32)
    //     } else {
    //       this.wldm = val.substring(0, 16)
    //     }
    //
    //     //查询物料信息
    //     var url2 = 'project/item/get_wldm_item_info/' + this.wldm
    //     fetch(util.base_url + url2, {
    //       method: 'GET',
    //       headers: { 'content-type': 'application/json' }
    //     }).then(res => res.json()).then(res => {
    //       if (res.msg == 'success') {
    //
    //         this.pmgg = res.data.itmPmgg
    //         this.rkkh = res.data.itmCustwldm
    //         this.rkck = res.data.itmCkmc
    //         this.rklx = '计划类型'
    //
    //         this.add_data.wldm = res.data.itmWldm
    //         this.add_data.pmgg = res.data.itmPmgg
    //         this.add_data.rkkh = res.data.itmCustwldm
    //         this.add_data.rkck = res.data.itmCkmc
    //
    //         this.$Message.success('成功')
    //       } else {
    //         alert(res.msg)
    //       }
    //     }).catch(err => {
    //       alert(err + '网络原因：请检查网络连接或服务器状态')
    //     })
    //
    //   }
    // },
    changeBcdm() {
      let date = this.moment().format('YYYY-MM-DD HH:mm:ss')
      getStatisticsWarehousing({ rpmBcdm: this.BcDm, rpdRkDate: date })
        .then((res) => {
          this.tabrkpb.cols = 1
          this.tabrkpb.tab = res.data.map((a) => {
            let b = a.number.split(',')
            this.tabrkpb.cols = Math.max(this.tabrkpb.cols, b.length)
            a.num = b
            a.sum = b.reduce((p, c) => p + parseInt(c), 0)
            a.time = a.totalksrq.split(',')
            return a
          })
        })
        .catch((err) => {
          alert(err + '网络原因：请检查网络连接或服务器状态')
        })
    },
    clearALL() {
      ;(this.date = ''),
        (this.wldm = ''),
        (this.pmgg = ''),
        (this.rkkh = ''),
        (this.rkck = ''),
        (this.rklx = ''),
        (this.add_data = this.add_data_null)
      this.num = null
      // this.handleFocus('start')
    },
    getAllCustomer() {
      if (this.customerCode == null || this.customerCode == '') {
        return
      }
      let temp = []
      let that = this
      let input = this.customerCode
      this.clearALL()

      new Promise(function (resolve, reject) {
        for (let i of that.provider_list_data) {
          if (i.itmCustwldm.substr(-6).indexOf(input) != -1) {
            temp.push(i)
          }
        }
        resolve(temp)
      }).then((res) => {
        this.provider_list = res.slice(0, 30)
      })
    },
    FillAttribute() {
      if (this.customerCode == null || this.customerCode == '') {
        return
      }

      getItmMstrByPDACustwldm({ itmCustwldm: this.customerCode }).then((res) => {
        if (res.code == '200') {
          this.wldm = res.data.itmWldm
          this.pmgg = res.data.itmPmgg
          this.rkkh = res.data.itmKhdm
          this.rkck = res.data.itmCkdm
          this.rklx = res.data.itmRklx

          this.add_data.wldm = res.data.itmWldm
          this.add_data.pmgg = res.data.itmPmgg
          this.add_data.rkkh = res.data.itmKhdm
          for (let i of this.warehouse_list) {
            if (i.itemCode == res.data.itmCkdm) {
              this.add_data.rkck = i.itemView
              break
            }
          }

          if (this.rklx == 'A') {
            this.add_data.rklx = '计划性入库'
          } else {
            this.add_data.rklx = '非计划入库'
          }

          // this.add_data.rkck = res.data.itmCkdm

          this.$Message.success('成功')
        } else {
          alert(res.msg)
        }
      })
    },
    sumData() {
      //传递物料代码,客户代码,入库仓库,入库类型,入库数量
      if (this.rkck == null) {
        this.$Message.error('该物料未绑定入库仓库,不能入库!!!')

        return
      }

      if (this.num == null || this.num < 1) {
        this.$Message.error('入库数量需要大于0的整数')

        return
      }

      //查询物料信息
      //console.log('物料代码:'+ this.wldm + ',入库客户:'+this.rkkh + ',入库仓库:'+this.rkck +',入库数量:' + this.num)

      automaticStorage(this.wldm, this.rkck, this.num, this.BcDm).then((res) => {
        if (res.code == '200') {
          this.customerCode = null
          this.clearALL()
          this.add_data = {
            rklx: '计划性入库',
          }
          this.$Message.success('成功')
          this.changeBcdm()
        } else {
          alert(res.msg)
        }
      })
    },
    backStorage() {
      // 返回上级路由并关闭当前路由
      //this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
      this.$router.push({ path: '/index' })
    },
  },
  mounted() {
    //创建定时器更新时间
    let _this = this
    const timers = setInterval(() => {
      let that = this
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      that.date = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    }, 1000)

    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
}
</script>

<style scoped lang="less">
.calculator {
  width: 100%;
}

.cal {
  width: 30%;
  height: 60px;
  margin: 2px;
  background-color: cornflowerblue;
  font-size: 20px;
  color: white;
}

.font_submit {
  font-size: 30px;
  color: black;
  font-weight: bold;
  text-align: left;
  margin-left: 20px;
}

.font_submit1 {
  font-size: 30px;
  color: black;
  font-weight: bold;
  text-align: left;
  margin-left: 50px;
}

.font_submit2 {
  font-size: 30px;
  color: red;
  font-weight: bold;
  text-align: left;
  margin-left: 50px;
}

.inputName > .ivu-select-selection {
  text-align: center;
}

.rightK {
  height: 100%;
  border-right: 1px solid gray;
}

.rkpb {
  margin: 10px 0px 0px 20px;

  table {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    line-height: 32px;
    font-size: 18px;

    td,
    th {
      border: 1px solid black;
    }
  }
}
</style>
